<template>
  <MrCustom bg-color="bg-gradual-blue " is-back>
    <template #backText>
      返回
    </template>
  </MrCustom>
  <view class="bg-white  radius" v-if="hospitalInfo">
    <view class="flex padding-sm justify-between">
      <view class="padding-xs text-xxl text-black">
        <view>{{ hospitalInfo.hospital }}
          <text class="text-gray text-df"></text>
        </view>
        <view class="text-gray text-df padding-top-sm">{{ hospitalInfo.address }}</view>
        <view class="text-sm padding-top-xs">
          {{ hospitalInfo.scale + ' | ' + hospitalInfo.level + ' | ' + hospitalInfo.property + ' | ' + hospitalInfo.type }}
        </view>
      </view>
      <view>
        <view class="cu-avatar round xl"
              :style="'background-image:url('+hospitalInfo.logo+');'">
        </view>
      </view>
    </view>

    <view class="bg-white radius-lg margin-sm padding-xs flex" @click="show=!show">
      <view class="piano-text" :class="show?'piano-ative':''">
        <label :class="show?'piano-ative_label':''"
            class="piano-btn-icon text-white padding-lr-xs text-sm margin-left-sm"></label>
        {{'简介：'+ hospitalInfo.description}}
      </view>
    </view>

    <!--热门文章-->
    <view v-if="nurseList&&nurseList.length" class="cu-good-act margin-sm bg-purple light">
      <view class="cu-good-t-box bg-gradual-green">
        <view class="cu-good-title">热门医生</view>
      </view>
      <view class="cu-good-point-con">
        <swiper class="swiper-box" :indicator-dots="false" :autoplay="true"
                :interval="5000" :duration="1000" circular="true" display-multiple-items="1">
          <swiper-item v-for="(item,index) in nurseList" :key="index" @click="toQueryNurse(item)">
<!--            <NurseItem :nurse-item="item"></NurseItem>-->
            <view class="cu-good-point-flex">
              <image class="cu-good-point-img round" :src="prefix+item.avatar"></image>
            </view>
            <view class="padding-tb text-bold text-xxl text-cut" style="width: 200px">{{ item.name }}</view>
            <view>{{ item.department }}</view>
          </swiper-item>
        </swiper>
      </view>
    </view>

    <!-- 评论列表-->
    <view class="bg-white margin-bottom-lg">
      <view class="cu-bar">
        <view class="text-black text-xxl padding-lr-sm">
          全部评论
        </view>
      </view>
      <z-paging ref="pagingRef" @query="queryList" v-model="list" use-page-scroll>
        <CommentList :list="list"></CommentList>
      </z-paging>
    </view>
    <view>&nbsp</view>

    <!-- 评论-->
    <view class="cu-bar foot input ">
      <view class="action">
        <text class="cuIcon-write text-gray"></text>
      </view>
      <input class="solid-bottom"
             confirm-type="send"
             @confirm="addCommentRoot"
             placeholder="写评论" v-model="content"
             maxlength="300" cursor-spacing="10"/>

      <view class="action" v-if="hospitalInfo">
        <text class="cuIcon-comment text-black"></text>
        <text v-if="hospitalInfo.isLike===1" class="cuIcon-appreciate text-orange"
              @click="likeHospital">
          <text class="text-gray text-xl">{{hospitalInfo.likeCount}}</text>
        </text>

        <text v-else class="cuIcon-appreciate text-black" @click="likeHospital"></text>
      </view>
    </view>
  </view>


</template>

<script setup lang="ts">
import {onLoad} from "@dcloudio/uni-app";
import {ref} from "vue";
import {imagePathPrefix} from '/settings'
import api from "@/api";
import hospital from "@/api/server/hospital";
import {useUserStore} from "@/store";
import CommentList from "@/components/common/list/CommentList.vue";
import MrCustom from "@/components/common/MrCustom.vue";

const userStore =useUserStore()
const prefix = imagePathPrefix
const hospitalInfo = ref()
const show = ref(false)
const nurseList =ref([])
const pagingRef =ref()
const content= ref('')
const list =ref([])
/**
 * 初始化
 */
onLoad((option) => {
  hospitalInfo.value = JSON.parse(decodeURIComponent(option.hospitalInfo))
  getHospitalInfo(hospitalInfo.value.id)
  getNurseList(hospitalInfo.value.hospital)
})
const getHospitalInfo =(id:any)=>{
  api.hospital.id({
    id:id,
  }).then(res=>{
    if(res&&res.data.code===0){
      hospitalInfo.value=res.data.data
    }
  })
}
const getNurseList =(hospital:any)=>{
  api.nurse.formalList({
    pageNo:1,
    pageSize:5,
    andParams:JSON.stringify({
      hospital:hospital
    }),
    orParams:JSON.stringify({}),
    orderParams:JSON.stringify({}),
  }).then(res=>{
    if(res&&res.data.code===0){
      nurseList.value=res.data.data.records
      console.log(nurseList.value)
    }
  })
}
const toQueryNurse =(item:any)=>{
  uni.navigateTo({
    url: '/pages/common/introduction/nurse?nurseInfo=' + encodeURIComponent(JSON.stringify(item))
  })
}
/**
 * 评论
 */
const queryList = (pageNo: any, pageSize: any) => {
  //组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
  //这里的pageNo和pageSize会自动计算好，直接传给服务器即可
  //模拟请求服务器获取分页数据，请替换成自己的网络请求
  api.comment.commentList({
    targetId: hospitalInfo.value.id,
    targetType: 4,
    pageNo: pageNo,
    pageSize: pageSize
  }).then(res => {
    if (res && res.data.code === 0) {
      let tmp = res.data.data.records
      pagingRef.value.complete(tmp);
    }
  })
}
const addCommentRoot = () => {
  console.log(content.value)
  api.comment.createCommentRoot({
    targetId: hospitalInfo.value.id,
    targetType: 4,
    fromUsername: userStore.userInfo.username,
    fromAvatar: userStore.userInfo.avatar,
    fromName: ' ',
    toUsername: hospitalInfo.value.hospital,
    content: content.value
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success',
        success: () => {
          pagingRef.value.reload()
          content.value = ''
        }
      })
    }
  })
}
const likeHospital =()=>{
  hospitalInfo.value.isLike = Math.abs(hospitalInfo.value.isLike - 1)
  api.hospital.like({
    id: hospitalInfo.value.id,
    toUsername:hospitalInfo.value.hospital
  }).then(res => {
    if (res && res.data.code === 0) {
      uni.showToast({
        title: res.data.msg,
        icon: 'success'
      })
    }
  })
}
</script>

<style scoped>

</style>